import React, {Component, PropTypes } from 'react'
import ReactDOM from 'react-dom'
import Wrapper from '../wrapper'

class Reset extends Component{
     constructor(props){
        super(props);
        this.state ={
            show:false,
            password1:'',
            password2:'',
            prompt1:false,
            prompt2:false,
            prompt3:false,
            verify:false
        }
     } 
     modifyPwd1(event){
        var password1 = event.target.value,
            prompt1 = this.state.prompt1,
            prompt2 = this.state.prompt2,
            prompt3 = this.state.prompt3,
            password2 = this.state.password2,
            buttonShow = this.buttonShow.bind(this),
            verifyPrompt3 = this.verifyPrompt3.bind(this);
        if(password1.length>0){
            this.setState({
                prompt1: true
            });
        }else{
            this.setState({
                prompt1: false
            });
        }
        if(password1.length>=6){
             this.setState({
                prompt2: true
            });
        }else{
            this.setState({
                prompt2: false
            });
        }
        this.setState({
            password1: password1
        });
        verifyPrompt3();
        setTimeout(() => buttonShow(),200);
      
        
     } 
    buttonShow(){
         var prompt1 = this.state.prompt1,
             prompt2 = this.state.prompt2,
             prompt3 = this.state.prompt3;
        if(prompt1&&prompt2&&prompt3){
            this.setState({
                verify: true
            });
        }else{
            this.setState({
                verify: false
            });
        }
    }
    verifyPrompt3(){
        var password1 = this.state.password1,
            password2 = this.state.password2,
            prompt3 = this.state.prompt3;
        if(password1!=''&&password2!=''){
            if(password1==password2){
                this.setState({
                    prompt3: true
                });
            }else{
                this.setState({
                    prompt3: false
                });
            }
        }
        else{
            this.setState({
                prompt3: false
            });
        }
    }
     showPwd(){
         var show = this.state.show;
         this.setState({
               show : !show,
        });
     }
     modifyPwd2(event){
        var password2 = event.target.value,
            password1 = this.state.password1,
            buttonShow = this.buttonShow.bind(this),
            verifyPrompt3 = this.verifyPrompt3.bind(this),
            prompt2 = this.state.prompt2,
            prompt1 = this.state.prompt1;
        this.setState({
                password2: password2
        });
        setTimeout(function(){verifyPrompt3()},200);
        
        setTimeout(function(){buttonShow()},200);
     }
     
    render() {
        var show = this.state.show,
            password1 = this.state.password1,
            password2 = this.state.password2,
            verify = this.state.verify,
            showPwd = this.showPwd.bind(this),
            prompt1 = this.state.prompt1,
            prompt2 = this.state.prompt2,
            prompt3 = this.state.prompt3,
            buttonShow = this.buttonShow.bind(this),
            modifyPwd1 = this.modifyPwd1.bind(this),
            modifyPwd2 = this.modifyPwd2.bind(this);
        return (
            <div className="row row1" >
                <div className = "title">
                    <h5>LeadBar</h5>
                    <a href = "/signup">注册</a><a className = "margin-right" href = "/login">登录</a>
                </div>
                <h4 className="col-xs-offset-3">重置密码</h4>
                <form className="form-inline col-xs-6 col-xs-offset-3" action ="/login/reset/success"> 
                    <div className="row">
                        <div className="col-xs-8 col-xs-offset-2" >                 
                            <p className="col-xs-4 "><b>密码</b></p>
                            <div className="col-md-3 col-md-offset-5 col-xs-6 text-right  col-xs-offset-2" ><p onClick = {showPwd}> 显示密码</p></div>
                            <div className="col-xs-12 form-group">   
                                <input type="password" type={show?"text":"password"} onChange = {modifyPwd1} className ="form-control" placeholder="请输入密码"/>
                            </div>
                            <div className="col-xs-12">
                                <span className={prompt1?"glyphicon glyphicon-ok-sign icon2":"glyphicon glyphicon-ok-sign icon"}></span>
                                <span > 一个数字、符号或英文</span>
                            </div>
                            <div className="col-xs-12">
                                <span className= {prompt2?"glyphicon glyphicon-ok-sign icon2":"glyphicon glyphicon-ok-sign icon"}></span>
                                <span > 至少六个字符长</span>
                            </div>
                            <p className="col-xs-6 "><b>确认密码</b></p>
                            <div className="col-xs-12 form-group">   
                                <input type = "password" className="form-control"  onChange = {modifyPwd2} placeholder="请重新输入密码"/>
                            </div>
                            <div className="col-xs-12">
                                <span className={prompt3?"glyphicon glyphicon-ok-sign icon2":"glyphicon glyphicon-ok-sign icon"}></span>
                                <span > 二次密码相同</span>
                            </div>
                            <div className="col-xs-12 padding1">
                                <button className={verify?"col-xs-12 btn btn-info":"col-xs-12 btn btn-primary"} disabled = {verify?"":"disabled"}>设置</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        );
    }
};

ReactDOM.render(
    <Reset />,
    document.getElementById('reset')
);